<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css" >
    <link rel="stylesheet" href="css/blog_datil.css">

     <!-- 引入edittor.md的依赖 -->
     <link rel="stylesheet" href="editor.md/css/editormd.min.css">
     <script src="js/jquery.min.js"></script>
     <script src="editor.md/lib/marked.min.js"></script>
     <script src="editor.md/lib/prettify.min.js"></script>
     <script src="editor.md/editormd.js"></script>



</head>
<body>
      <!-- //导航栏 -->
    <div class="nav">
        <img src="image/logo.png" alt="">
        <span >我的博客系统</span>
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>

    </div>


        <!-- 版心 -->
        <div class="container">
            <!-- 左侧个人信息 -->
            <div class="left">
                <!-- 表示整个用户信息区域 -->
                <div class="card">
                    <img src="image/blog_background.jpg">
                    <h3></h3>
                    <a href="">gitee地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
    
            </div>
    
            <!-- 右侧内容详情 -->
            <div class="right">
                <!-- 使用div来包裹博客的整个内容 -->
                <div class="blog_content">
                    <!-- 博客标题 -->
                    <h3></h3>
                    <!-- 博客时间 -->
                    <div class="date"></div>
                    <!-- 博客正文 -->
                    <div id="content" style="opacity: 80%;">

                    </div>
                  

                </div>

    
    
            </div>
        </div>

        <!-- <script src="js/commom.js"></script> -->
        <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
        <script>

            function getBlogDetail(){
                $.ajax({
                    type: 'get',
                    //location.search拿到了？blogId这样的内容
                    url: 'blog' + location.search,
                    success: function(body){
                        //根据body中的内容来构造页面
                        let h3 = document.querySelector(".blog_content>h3");
                        h3.innerHTML = body.title;
                        //2.构造博客发布时间
                        let dateDiv = document.querySelector('.date');
                        dateDiv.innerHTML = body.postTime;
                        //3.构造博客正文
                        //如果直接把content设为innerHTML，此时展示的效果是原始的效果
                        // let content = document.querySelector('#content');
                       
                        //第一个参数对应id为content的html标签
                        //渲染后的标签会放大这个页面下
                        editormd.markdownToHTML('content',{
                            markdown: body.content
                        });

                        

                    }

                });
            }

            //获取博客详情
            getBlogDetail();
            
          

            //--------------------------------------------------------------------

            //通过get/login获取登录状态
            function getUserInfo(pageName){
                $.ajax({
                    type:'get',
                    url:'login',
                    success: function(body){
                        //判定此处的body是不是有效的user对象
                        if(body.userId && body.userId >0){
                            console.log("当前用户登录成功! 用户名"+body.username);
                            
                            //在getUserInfo函数里面调用获取作者信息,因为ajax异步执行，为了确保执行顺序，所以这样使用
                            getAuthorInfo(body);
                        
                        }else{
                            alert("当前您尚未登录！请登录后再访问博客");
                            location.assign('blog_login.html');
                        }
                    },
                    error: function(){
                        alert("当前您尚未登录成功！请登录后再访问博客");
                        location.assign('blog_login.html');
                    }

                });


            }

         

            //判定用户的登录状态
            getUserInfo("blog_detail.html");


              //获取当前博客的作者信息
              function getAuthorInfo(user){
                $.ajax({
                    type:'get',
                    url:'authorInfo'+location.search,
                    success:function(body){
                        //此处body就是服务器放回的User
                        if (body.username){
                            //如果相应的username存在，就把这个值设置到页面上
                            changeUserName(body.username);

                            if(body.username == user.username){
                                //作者和当前登录用户一致，显示删除按钮
                                let navDiv = document.querySelector('.nav');
                                let a = document.createElement('a');
                                a.innerHTML = '删除';
                                //期望点击删除，构造一个形如blogDelete?blogId=6这样的请求
                                a.href = 'blogDelete'  + location.search;
                                navDiv.appendChild(a);

                            }
                        }else{
                            console.log("获取作者信息失败"+body.reason);
                        }
                    }
                })
            }

            function changeUserName(username){
                let h3 = document.querySelector('.card>h3');
                h3.innerHTML = username;
            }
            
          



           
        </script>


</body>
</html>